<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
</head>
<body style="background-color: #F8F8F8">
<div style="position: absolute;left: 0;right: 0;top: 0;bottom: 0">
    <div style="display: flex;justify-content: center;margin-top: 5%">
        <div class="animated fadeIn" style="width: 20%;background-color: #fff;border: solid
        #337AB7 1px;border-radius: 10px;box-shadow: 0 0
        10px
        #337AB7
        ;padding:
        20px">

            <div class="layui-card">
                <h2 style="text-align: center"
                    class="layui-card-header"><strong style="font-size: 20px">用户注册</strong></h2>
            </div>

            <form class="layui-form">

                <div class="layui-form-item">
                    <div style="display: flex;justify-content: center">
                        <label class="layui-form-label">登录名<span style="color: red">*</span></label>
                        <div style="display: flex;">
                            <input style="width: 78%;border-left: none; border-right: none; border-top: none;
                            border-bottom:1px solid #337AB7" maxlength="10" type="text" name="loginName"
                                   class="layui-input" placeholder="不超过10个字符">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="display: flex;justify-content: center">
                        <label class="layui-form-label">密码<span style="color: red">*</span></label>
                        <div>
                            <input style="width: 78%;border-left: none; border-right: none; border-top:
                            none;border-bottom: 1px solid #337AB7" maxlength="20" type="password" name="password"
                                   class="layui-input" placeholder="不超过20个字符">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="display: flex;justify-content: center">
                        <label class="layui-form-label">确认密码<span style="color: red">*</span></label>
                        <div>
                            <input style="width: 78%;border-left: none; border-right: none;
                             border-top: none; border-bottom: 1px solid #337AB7" maxlength="20" type="password"
                                   name="verifyPassword" class="layui-input" placeholder="确认密码" required>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="display: flex;justify-content: center">
                        <label class="layui-form-label">姓名</label>
                        <div>
                            <input style="width: 78%;border-left: none; border-right: none; border-top: none; border-bottom: 1px
                             solid #337AB7" maxlength="20" type="text" name="name" class="layui-input"
                                   placeholder="真实姓名">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="display: flex;justify-content: center">
                        <label class="layui-form-label">电话</label>
                        <div>
                            <input style="width: 78%;border-left: none; border-right: none; border-top: none; border-bottom: 1px
                             solid #337AB7" maxlength="20" type="tel" name="tel" class="layui-input" placeholder="电话号码">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="display: flex;justify-content: center">
                        <label class="layui-form-label">住址</label>
                        <div>
                            <input style="width: 78%;border-left: none; border-right: none; border-top: none; border-bottom: 1px
                             solid #337AB7" maxlength="20" type="text" name="address" class="layui-input"
                                   placeholder="xx小区xx栋xx号">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div style="display: flex;height: 30px;margin-top: 25px;justify-content: center">
                        <button id="registerBtn" type="button"
                                style="width: 65%;background-color: #337AB7;color: white;
                                border-radius: 30px;border: #337AB7;cursor: pointer">
                            提交审核
                        </button>
                    </div>
                    <div style="display: flex;margin-top: 5px;justify-content: center">
                        <a th:href="@{/user/login}" style="color: #9F9F9F">已有账号，返回登录</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script>
    $(function () {
        layui.use(['element', 'form', 'table', 'layer'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;

            $("#registerBtn").click(function () {
                let loginName = $("input[name=loginName]").val().trim();
                let tel = $("input[name=tel]").val().trim();
                let address = $("input[name=address]").val().trim();
                let name = $("input[name=name]").val().trim();
                let pwd = $("input[name=password]").val().trim();
                let verfyPwd = $("input[name=verifyPassword]").val();
                if (loginName == '' || pwd == '' || verfyPwd == '') {
                    layer.msg("请完善必填信息");
                } else if (pwd != verfyPwd) {
                    layer.msg("两次输入密码不一致");
                } else {
                    let data = {};
                    data.loginName = loginName;
                    data.password = pwd;
                    data.tel = tel;
                    data.address = address;
                    data.name = name;
                    $.ajax({
                        url: "/userController/register",
                        data: JSON.stringify(data),
                        contentType: "application/json",
                        type: 'post',
                        success: function (resp) { //请求成功后的回调函数
                            layer.msg(resp.msg);
                        }
                    });
                }
            });
        });
    });

</script>

</body>
</html>